<template>
  <div>
    <el-form :model="videoQuery" inline>
      <el-form-item label="存储桶">
        <el-input v-model="videoQuery.bucketName"></el-input>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="videoQuery.title"></el-input>
      </el-form-item>
      <el-form-item label="文件类型">
        <el-select v-model="videoQuery.fileType" style="width: 200px">
          <el-option label="全部" value=""></el-option>
          <el-option label="视频" value="video"></el-option>
          <el-option label="图片" value="image"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传者ID">
        <el-input v-model="videoQuery.userId"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getVideoLPage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="videoPage.list" border stripe>
      <el-table-column type="expand">
        <template #default="props">
          <div class="time-info">
            <div>创建: {{ formatDate(props.row.createdAt) }}</div>
            <div>更新: {{ formatDate(props.row.updatedAt) }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="封面预览">
        <template #default="scope">
          <el-image
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"
              fit="cover"
              :preview-teleported="true"
              width="80"
              height="50"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="videoId" label="视频ID"></el-table-column>
      <el-table-column prop="userId" label="上传者ID"></el-table-column>
      <el-table-column prop="title" label="视频标题"></el-table-column>
      <el-table-column prop="description" label="视频描述">
        <template #default="scope">
          <div class="desc-ellipsis">{{ scope.row.description || '无描述' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="videoUrl" label="视频地址">
        <template #default="scope">
          <a :href="scope.row.videoUrl" target="_blank" class="url-link">查看地址</a>
        </template>
      </el-table-column>
      <!-- 视频规格 -->
      <el-table-column label="视频规格">
        <template #default="scope">
          {{ scope.row.width }} × {{ scope.row.height }} px
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="时长"></el-table-column>
      <el-table-column label="播放/点赞/评论" width="220" align="center">
        <template #default="scope">
          <span>播放: {{ scope.row.viewCount || 0 }}</span>
          <span class="stat-separator">|</span>
          <span>点赞: {{ scope.row.likeCount || 0 }}</span>
          <span class="stat-separator">|</span>
          <span>评论: {{ scope.row.commentCount || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="privacy" label="可见性" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.privacy === 1 ? 'success' : 'info'">
            {{ scope.row.privacy === 1 ? '公开' : '私有' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag>
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isOriginal" label="是否原创">
        <template #default="scope">
          <el-switch
              v-model="scope.row.isOriginal"
              :active-value="1"
              :inactive-value="0"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleView(scope.row)">查看</el-button>
          <el-button size="small" type="success" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="mt-4"
        v-model:current-page="videoQuery.pageNum"
        v-model:page-size="videoQuery.pageSize"
        :total="videoPage.total"
        layout="total, sizes, prev, pager, next, jumper"
    />
    <el-dialog
        v-model="dialogVisible"
        title="视频"
        width="600"
        @close="closeView"
    >
      <div>
        <VideoPlayer ref="videoPlayerRef" :video-src="videoInfo.videoUrl" :poster="videoInfo.cover"></VideoPlayer>
        <div>
          标题: {{ videoInfo.title }}
        </div>
        <div>
          描述: {{ videoInfo.description }}
        </div>
        <div>
          播放量：{{videoInfo.viewCount}}
        </div>
        <div>
          点赞数：{{videoInfo.likeCount}}
        </div>
        <div>
          评论数：{{videoInfo.commentCount}}
        </div>
        <div>
          分类名：{{videoInfo.categoryName}}
        </div>
        <div>
          标签：<span v-for="tag in videoInfo.tagList">{{tag.name}}</span>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">预览</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, watch, ref} from "vue";
import {reqGetVideoInfo, reqGetVideoPage} from "@/api/share";
import {formatDate} from '@/util'
import {useRouter} from "vue-router";
import VideoPlayer from '@/components/VideoPlayer.vue'

let router = useRouter()
let videoPlayerRef=ref()
let videoQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  bucketName: "",
  title: '',
  fileType: "",
  userId: "",
});
let dialogVisible = ref(false)
let videoPage = reactive({
  total: 0,
  list: [],
});
let videoInfo = ref()

let handleView = async (row) => {
  let res = await reqGetVideoInfo(row.videoId)
  videoInfo.value = res.data
  dialogVisible.value = true
}
let handleEdit = () => {
  router.push({
    path: "/layout/share/video/create",
    query: {
      videoId: ''
    }
  })
}
let closeView=()=>{
  if (videoPlayerRef.value) {
    videoPlayerRef.value.pauseVideo();
  }
  videoInfo.value = null
}
let getVideoLPage = async () => {
  let res = await reqGetVideoPage(videoQuery)
  Object.assign(videoPage, res.data)
}
onMounted(() => {
  getVideoLPage()
})
watch([() => videoQuery.pageNum, () => videoQuery.pageSize], () => {
  getVideoLPage()
})
</script>

<style scoped>

</style>
